<template>
  <div class="myTable">
    <el-row class="searchRow">
      <el-input style="width:200px"
                placeholder="关键字"
                prefix-icon="el-icon-search"
                class="mr15"
                v-model="keyword">
      </el-input>
      <el-button  type="success" @click="query(1)" >查询</el-button>
      <el-button  type="default" @click="clear()" >重置</el-button>
    </el-row>
    <div class="textLeft" style="padding-left: 20px">
    </div>
    <el-table :data="curType.tableData.data" class="mt20" :show-header="true" :header-row-class-name="'tableHead'" :header-cell-class-name="'tableHeadCell'">
      <el-table-column  label="索引号" width="240px">
        <template slot-scope="scope">
          <el-link type="primary"  class="caseDetail" @click="showFoodDetail(scope.row)">{{scope.row.indexno}}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="名称"  prop="title">  </el-table-column>
      <el-table-column label="公开日期" width="140px" prop="publicdate" ></el-table-column>
      <el-table-column label="公开单位" width="300px" prop="fbjg"></el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" style="margin-top: 25px"
                   layout="total,prev, pager, next" :total="curType.tableData.rowsCount" background :page-size="curType.tableData.pageSize"> </el-pagination>
    <el-dialog   width="80%" :title="foodDetail.title" :fullscreen=false class="fullDialog" :visible.sync="foodVisible">
      <table style="width: 100%" class="labelClass">
        <tr>
          <td>发 布 机 构</td><td>{{foodDetail.fbjg}}</td>
          <td>生 成 日 期</td><td>{{foodDetail.publicdate}}</td>
          <td>公 开 方 式</td><td>{{foodDetail.publictype}}</td></tr>
        <tr><td>索 引 号</td><td>{{foodDetail.indexno}}</td>
          <td>有 效 期</td><td>{{foodDetail.period}}</td>
          <td>文 号</td><td>{{foodDetail.docNo}}</td>
        </tr>
        <tr><td>关 键 词</td>{{foodDetail.none}}<td></td>
          <td>责任科室</td>{{foodDetail.none}}<td></td>
          <td>主题分类</td><td>{{foodDetail.ztfl}}</td></tr>
      </table>
      <div class="textWrap">
        <p class="textLeft content myWord" v-html="foodDetail.jgcontent">
        </p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  const curType = {type: 1, name: "食品药品安全公示",url:"/yczmq/bigScreen/watch/page",tableData:{pageSize:10}};
  export default {
    name: "certificateFoodSafe",
    data: function() {
      return {
        curType:curType,
        foodVisible:false,
        keyword:"",
        foodDetail:{}
      }
    },
    methods: {
      query: function (pageNo) {
        let vm = this;
        let data = {
          curPageNO: pageNo,
          pageSize: 10,
          keyword:vm.keyword,
          startTime: "",
          endTime: ""
        }
        this.$http.post(vm.curType.url, window.changeDataType(data)).then(resp => {
          if (resp.status == 0) {
            vm.curType.tableData = resp.data;
          }
        })
      },
      clear(){
        this.keyword = "";
      },
      handleCurrentChange(pageNo){
        this.query(pageNo);
      },
      showFoodDetail:function(item){
        let vm = this;
        this.$http.get("/yczmq/bigScreen/watch/get/{id}".replace("{id}",item.id)).then(resp => {
          if (resp.status == 0) {
            vm.foodDetail = resp.data;
            vm.foodDetail.jgcontent = vm.foodDetail.jgcontent.replace(/\n\n/gm,"<br/>")
            vm.foodVisible = true;
          }
        })
      }
    },
    created(){
      this.query(1);
    }
  }
</script>
<style>

</style>
<style scoped>
  button.el-button--primary.is-plain.active{
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    background: #409EFF;
    border-color: #409EFF;
    color: #FFF;
  }
</style>